﻿<template>
  <div>
    <!-- Basic usage with v-bind and v-on instead of v-model -->
    <div>
      <h3>基础 v-model 用法:</h3>
      <input
          type="text"
          :value="basicText"
          @input="$emit('update:basicText', $event.target.value)"
      />
    </div>

    <!-- Computed property for title -->
    <div>
      <h3>Computed property for title:</h3>
      <input
          type="text"
          :value="computedTitle"
          @input="computedTitle = $event.target.value"
      />
    </div>

    <!-- v-model with modifiers -->
    <div>
      <h3>v-model with capitalize modifier:</h3>
      <input
          type="text"
          :value="capitalizeText"
          @input="$emit('update:capitalizeText', capitalize($event.target.value))"
      />
    </div>

    <!-- Multiple v-model bindings with individual emits -->
    <div>
      <h3>Multiple v-model bindings:</h3>
      <input
          type="text"
          :value="firstName"
          @input="$emit('update:firstName', firstNameModifiers.capitalize ? capitalize($event.target.value) : $event.target.value)"
      />
      <input
          type="text"
          :value="lastName"
          @input="$emit('update:lastName', $event.target.value.toUpperCase())"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    basicText: String,
    title: String,
    capitalizeText: String,
    firstName: String,
    lastName: String,
    firstNameModifiers: {
      default: () => ({})
    },
  },
  emits: ['update:basicText', 'update:title', 'update:capitalizeText', 'update:firstName', 'update:lastName'],
  methods: {
    capitalize(value) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  },
  computed: {
    computedTitle: {
      get() {
        return this.title;
      },
      set(value) {
        this.$emit('update:title', value+1111);

      }
    }
  },
  created() {
        console.log(this.firstNameModifiers)// { capitalize: true }
  }
}
</script>
